<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>vant3</title>
    <link rel="stylesheet" href="./style/index.css"/>
    <link rel="stylesheet" href="./style/base.css"/>
    <script src="./js/vue@3.js"></script>
    <script src="./js/vant.min.js"></script>
    <script src="./js/utils.js"></script>
    <script src="./js/common.js"></script>
</head>
<body>
<div id="app">
    <page-header :title="title"></page-header>
    <div class="main">
        mine
    </div>
    <div class="main-footer">
        <page-footer></page-footer>
    </div>
</div>
<!--<script src="./js/utils.js"></script>-->

<script>
    // compositionAPI
	// const { ref, defineComponent, computed } = Vue
	// const app = Vue.createApp({
	// 	name: 'IndexView',
	// 	setup () {
	// 		const count = ref(0)
	// 		const title = ref('vant3')
	// 		const double = computed(() => {
	// 			return count.value * 2
	// 		})
	// 		const increase = () => {
	// 			count.value++
	// 		}
	// 		return {
	// 			count,
	// 			double,
	// 			increase,
	// 			title
	// 		}
	// 	}
	// });

    // optionAPI
	const IndexVueApp = {
		data() {
			return {
				title: 'Vant3-doria',
                active: 0,
                images: [
                    'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg',
                    'https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg'
                ]
			}
		},
        mounted() {
            console.log(this.title)
        },
        methods: {
        }
	}

	const app = Vue.createApp(IndexVueApp)
	app.use(vant);
	app.use(vant.Lazyload); // 如果需要懒加载需要单独引入
    app.component('PageHeader', PageHeader)
    app.component('PageFooter', PageFooter)
	app.mount('#app')


</script>
</body>
</html>
